import React, { Component, Fragment } from 'react';
import { Card, Table, Modal, Button, message, Badge } from 'antd';
import ajax from '../../utils/ajax';
import '../ui/ui.less';

export default class Basic extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mockData: [],
      selectedRowKeys: [],
      selectedItem: [],
      selectedCheckBoxRows: '',
      selectedRows: '',
      Pagination: {
        current: '1',
        pageSize: '10',
        pageSizeOptions: ['1', '5', '10', '30'],
        showQuickJumper: true,
        showSizeChanger: true
      },
      sortedInfo: {
        order: 'descend',
        columnKey: 'age'
      }
    };
  }

  componentWillMount() {
    this.getDataList();
  }

  getDataList = () => {
    ajax.get('table/basic/list').then(res => {
      res.result.list.map((item, index) => {
        return (item.key = index);
      });
      let result = res.result;
      this.setState({
        mockData: result.list,
        Pagination: {
          current: result.page,
          pageSize: result.page_size,
          total: result.total_count,
          showTotal: () => {
            return `共${result.total_count}条`;
          },
          onChange: current => {
            this.getDataList(current);
          }
        }
      });
    });
  };

  handleChange = (pagination, filters, sorter) => {
    this.setState({
      sortedInfo: sorter
    });
  };

  // 删除操作
  handleDelete = item => {
    Modal.confirm({
      title: '确认',
      content: '您确认要删除此条数据吗？',
      onOk: () => {
        message.success('删除成功');
        this.getDataList();
      }
    });
  };

  render() {
    let { sortedInfo } = this.state;
    const mockColumns = [
      {
        title: 'id',
        key: 'id',
        dataIndex: 'id',
        width: 50,
        fixed: 'left'
      },
      {
        title: '用户名',
        key: 'username',
        dataIndex: 'username',
        width: 150
      },
      {
        title: '性别',
        key: 'sex',
        dataIndex: 'sex',
        render(sex) {
          return sex === 1 ? '男' : '女';
        },
        width: 50
      },
      {
        title: '年龄',
        key: 'age',
        dataIndex: 'age',
        width: 100,
        sorter: (a, b) => a.age - b.age,
        sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order
      },
      {
        title: '状态',
        key: 'state',
        dataIndex: 'state',
        width: 100,
        render(state) {
          let config = {
            '1': '咸鱼一条',
            '2': '风华浪子',
            '3': '北大才子',
            '4': '百度FE',
            '5': '创业者'
          };
          return config[state];
        }
      },
      {
        title: '爱好',
        key: 'interest',
        dataIndex: 'interest',
        width: 100,
        render(abc) {
          let config = {
            '1': <Badge status="success" text="游泳" />,
            '2': <Badge status="error" text="打篮球" />,
            '3': <Badge status="default" text="踢足球" />,
            '4': <Badge status="processing" text="跑步" />,
            '5': <Badge status="warning" text="爬山" />,
            '6': '骑行',
            '7': '桌球',
            '8': '麦霸'
          };
          return config[abc];
        }
      },
      {
        title: '生日',
        key: 'birthday',
        width: 200,
        dataIndex: 'birthday'
      },
      {
        title: '地址',
        width: 300,
        key: 'address',
        dataIndex: 'address'
      },
      {
        title: '早起时间',
        key: 'time',
        dataIndex: 'time',
        width: 100
      },
      {
        title: '操作',
        render: (text, item) => {
          return (
            <Button
              size="small"
              onClick={item => {
                this.handleDelete(item);
              }}
            >
              删除
            </Button>
          );
        }
      }
    ];

    let { mockData } = this.state;
    return (
      <Fragment>
        <Card title="Easy-Mock-Data" className="card-wrap">
          <Table
            dataSource={mockData}
            columns={mockColumns}
            bordered
            pagination={false}
            size="small"
            scroll={{ y: 600, x: 1200 }}
            onChange={this.handleChange}
          />
        </Card>
      </Fragment>
    );
  }
}
